<template>
  <!-- 提高一个层次，放置因为v-if没有正常销毁:change事件导致重复 -->
  <view :prop="uploadState"
        :change:prop="mask.drawMask">
    <view v-if="!hidden" >
      <view class="mb-30">
        <sub-title :title="standardListItem.name">
          <template v-if="standardListItem.type === CHECK_TYPE.MULTIPLE_OPTION.KEY">
            <text
                class="fz-32 lh-45 m-tb-20 block color-2D8CF0 mr-10 w-150 text-right"
                @tap="isStatusCheckModalShow = true"
            >
              请选择 >
            </text>
          </template>
        </sub-title>
      </view>

      <!--单选标准-->
      <view v-if="standardListItem.type === CHECK_TYPE.SINGLE_OPTION.KEY">
        <u-radio-group class="w-full" v-model="result" active-color="#19BE6B" size="40" @change="radioChange">
          <view class="flex w-full flex-column">
            <view class="w-full flex align-center p-lr-40 mb-30" v-for="(item, index) in list" :key="index">
              <u-radio
                  class="flex w-full border-333333 br-10 pl-25"
                  label-size="32"
                  :name="item.name"
              >
                {{item.name || '-'}}
              </u-radio>
            </view>
          </view>
        </u-radio-group>
      </view>

      <!--多选标准-->
      <view class="pb-24 p-lr-40 fz-32 lh-45 status resultArray text-ellipsis oh"
            v-if="result && result.length && standardListItem.type === CHECK_TYPE.MULTIPLE_OPTION.KEY"
      >
        <text
            v-for="(item, index) in resultArray"
            :key="index"
            :class="[standardListItem.normal.split(',').includes(item) ?'color-19BE6B':'color-FF6262']"
        >
          {{item}}
        </text>
      </view>

      <!--填值标准-->
      <view class="flex align-center justify-between m-lr-40 p-lr-20 fz-32 border-888888 br-10 mb-30 h-80 lh-80" v-if="standardListItem.type === CHECK_TYPE.INPUT.KEY" @tap="showInput">
        <text class="flex1 color-000000" v-if="value || value === 0"> {{ value }} </text>
        <text class="flex1 color-888888" v-else>点击输入</text>
        <text>{{standardListItem.unit || ''}}</text>
      </view>

      <!--拍照模块-->
      <view v-if="isShowUploadPhoto && standardListItem.isTakePhoto" class="mb-30 pl-40">
        <text class="fz-32 color-888888 lh-45">拍照</text>
        <text class="fz-32 color-FF6262">*</text>
        <view class="flex flex-wrap">
          <!-- 图片缩略图 -->
          <view class="relative mr-30 mt-20" v-for="(item, index) in photoFiles" :key="index">
            <image
                class="h-150 w-150"
                :data-cur="item.url"
                :src="item.url"
                @tap="previewImage"
            />
            <!--  移除图片的按钮  -->
            <view class="absolute delBtn" @tap.stop="removeImage(index)">
              <image
                  class="h-24 w-24"
                  src="@/static/images/workList/delPhoto.png"
              />
            </view>
            <!-- 图片未上传标识 -->
            <view v-if="!item.isUploaded" class="absolute top0 bottom0 h-150 w-150 bg-00000060 color-fff fz-20 flex align-center justify-center" @tap="previewImage" :data-cur="item.url">
              <image
                  class="h-24 w-24 mr-4"
                  src="@/static/images/common/download.png"
              />
              <text>已缓存</text>
            </view>
          </view>
          <view v-if="photoFiles.length < 6" class="h-150 w-150 mt-20 bg-CCCCCC flex align-center justify-center" @tap="chooseImage(false)">
            <image class="h-50 w-50" src="@/static/images/workList/camera.png"></image>
          </view>
        </view>
      </view>

      <!--异常上报模态框-->
      <u-modal
          v-model="isErrorModalShow"
          :show-confirm-button="false"
          :show-title="false"
          border-radius="20"
          z-index="10"
          :zoom="false"
      >
        <view class="flex flex-column align-center p-lr-20">
          <view class="border-bottom-CCCCCC w-full text-center lh-116 fz-40 font-bold color-333333">
            <text>异常情况上报</text>
          </view>

          <view class="border-bottom-CCCCCC w-full p-tb-10 pl-20 flex min-h-220">
            <textarea
              class="flex1 min-h-200 color-000000"
              :value="detail"
              @input="input"
              auto-height
              placeholder="请输入异常详情"
              placeholder-style="color:#CCCCCC;font-size:30rpx"
              maxlength="200"
              :show-confirm-bar="false"
            />
          </view>
          <view class="flex w-full color-333333 fz-32 lh-45 mt-20 pl-20">
            <text>拍照（选填项）</text>
          </view>

          <view class="p-tb-20 pl-20 w-full">
            <view class="mt-10 flex flex-wrap">
              <!-- 图片缩略图  -->
              <view class="relative mr-30 mb-20" v-for="(item, index) in errphotoFiles" :key="index">
                <image
                    class="h-150 w-150"
                    :data-cur="item.url"
                    :src="item.url"
                    @tap="previewImage($event, true)"
                />
                <!--  移除图片的按钮  -->
                <view class="absolute delBtn" @tap.stop="removeImage(index, true)">
                  <image
                      class="h-24 w-24"
                      src="@/static/images/workList/delPhoto.png"
                  />
                </view>
                <!-- 图片未上传标识 -->
                <view v-if="!item.isUploaded" class="absolute top0 bottom0 h-150 w-150 bg-00000060 z-10 color-fff fz-20 flex align-center justify-center">
                  <image
                      class="h-24 w-24 mr-4"
                      src="@/static/images/common/download.png"
                  />
                  <text>已缓存</text>
                </view>
              </view>
              <view v-if="errphotoFiles.length < 5" class="h-150 w-150 mb-20 bg-CCCCCC flex align-center justify-center" @tap="chooseImage(true)">
                <image class="h-50 w-50" src="@/static/images/workList/camera.png"></image>
              </view>
            </view>
          </view>

          <view class="flex align-center justify-center mb-40">
            <view class="border-2D8CF0 w-120 h-60 border-box color-2D8CF0 fz-28 text-center lh-60 br-5 mr-50"
                  @tap="cancle">
              <text>取消</text>
            </view>
            <view class="bg-2D8CF0 w-120 h-60 color-fff fz-28 text-center lh-60 br-5" @tap="confirm">
              <text>确定</text>
            </view>
          </view>
        </view>
      </u-modal>

      <!--状态多选模态框-->
      <u-modal v-model="isStatusCheckModalShow" :show-confirm-button="false" :show-title="false" border-radius="20">
        <view class="w-full flex flex-column align-center p-lr-50">
          <scroll-view scroll-y :show-scrollbar="true" class="w-full options_container">
            <u-checkbox-group class="w-full" size="40">
              <view class="w-full flex flex-column">
                <view v-for="(item, index) in statusList" :key="index" class="min-h-160 w-full flex align-center border-bottom-CCCCCC">
                  <u-checkbox class="w-full flex" :name="item.name" v-model="item.checked" :disabled="false" shape="circle" active-color="#19BE6B">
                    <view class="ml-30">
                      <text class="font-bold color-333333 fz-32" > {{ item.name }} </text>
                    </view>
                  </u-checkbox>
                </view>
              </view>
            </u-checkbox-group>
          </scroll-view>
          <view class="flex align-center justify-center m-tb-50">
            <view class="border-2D8CF0 w-120 h-60 border-box color-2D8CF0 fz-28 text-center lh-60 br-5 mr-50"
                  @tap="statusCheckCancle">
              <text>取消</text>
            </view>
            <view class="bg-2D8CF0 w-120 h-60 color-fff fz-28 text-center lh-60 br-5" @tap="statusCheckConfirm">
              <text>提交</text>
            </view>
          </view>
        </view>
      </u-modal>

      <!--键盘上方显示填值标准区域-->
      <popup-input v-if="standardListItem.type == 2" :isShow="isShow" @close="close" @confirm="valueChange" :value="value"></popup-input>

    </view>
  </view>
</template>

<script>
import subTitle from "@/components/SubTitle/SubTitle";
import dayjs from '@/libs/dayjs.min.js'
import {submit} from "@/api/inspection/task";
import PopupInput from "./PopUpInput.vue";
import uploadImg from '@/mixins/uploadImg';
import {mapGetters} from 'vuex'
import {deepClone} from '@/utils'
import {base64ToPath} from '@/utils/upload'

export default {
  name: "CheckItem",
  components: {PopupInput, subTitle},
  mixins: [uploadImg],
  props: ['standardListItem','hospitalId','workOrderId','deviceName','workOrderName','isUseCache','workOrderDeviceId', 'hidden'],
  data(){
    return {
      list: [],//单选状态列表
      statusList:[],//多选状态列表 [{},{}]
      oldStatusList:[],//原始多选状态列表 [{},{}]
      result: '',//单选多选结果
      value: '',//输入框结果
      oldValue:'',
      originalValue: '', //上次提交的数值数据
      oldResult:'',
      originalResult: '', //上次提交的选项数据
      status: null,//值的状态 0：正常 1：异常
      photoFiles:[],//标准图片链接列表
      cacheDetail: '',//本地缓存的异常详情
      detail:'',//页面显示的异常详情
      cacheErrphotoFiles: [],//本地缓存的异常图片链接列表
      errphotoFiles: [],//页面显示的异常图片链接列表
      isStatusCheckModalShow: false,//状态多选弹窗
      isErrorModalShow:false,//异常上报弹窗
      isShowUploadPhoto:true,//是否展示拍照模块
      isShow: false,
    }
  },
  watch:{
    isUseCache :{
      handler(isUseCache){
        const isHaveCache = !!this.checkedCache[this.workOrderDeviceId]
        const room_checked_cache = this.initStorage()
        this.init()
        //使用线上数据
        if(isUseCache === false || !isHaveCache){
          this.standardListItem.value = this.standardListItem.value || this.standardListItem.value == 0 ? parseFloat(this.standardListItem.value) : ''
          this.photoFiles = this.standardListItem.images && this.standardListItem.images.length ? this.standardListItem.images.map(item => ({
            url:item.url,
            ossId: item.ossId,
            isUploaded: true
          })) : []
          this.value = this.standardListItem.value
          this.oldValue = this.standardListItem.value
          this.originalValue = this.standardListItem.value
          this.result = this.standardListItem.result
          this.oldResult = this.standardListItem.result
          this.originalResult = this.standardListItem.result
        }
        //使用本地缓存
        if(isUseCache === true && isHaveCache){
          const cache = room_checked_cache[this.workOrderDeviceId][this.standardListItem.workOrderDeviceStandardId]
          this.value = cache.value
          this.oldValue = cache.value
          this.originalValue = cache.value
          this.result = cache.result
          this.oldResult = cache.result
          this.originalResult = cache.result
          this.photoFiles = cache.photoFiles || []
          this.cacheErrphotoFiles = cache.errphotoFiles || []
          this.cacheDetail = cache.detail
        }
        if(this.result){
          this.result.split(',').forEach(item => {
            this.statusList.forEach(statusListItem => {
              if(statusListItem.name === item){
                statusListItem.checked = true
              }
            })
          })
        }
        this.oldStatusList = deepClone(this.statusList)
        this.$emit('calcHeight')
      },
      immediate: true
    },
    value: {
      handler() {
        if(this.standardListItem.type === this.CHECK_TYPE.INPUT.KEY){
          this.isShowUploadPhoto = !this.isAbnormalValue()
          if(this.isAbnormalValue()){
            this.status = 1
          }
          else if(this.value !==0 && !this.value){
            this.status = null
          }
          else{
            this.status = 0
          }
        }
        this.$emit('calcHeight')
      },
      immediate: true
    },
    result: {
      handler() {
        if(this.standardListItem.type === this.CHECK_TYPE.MULTIPLE_OPTION.KEY || this.standardListItem.type === this.CHECK_TYPE.SINGLE_OPTION.KEY){
          this.isShowUploadPhoto = !this.isAbnormalResult()
          if(this.isAbnormalResult()){
            this.status = 1
          }
          else if(!this.result){
            this.status = null
          }
          else{
            this.status = 0
          }
        }
        this.$emit('calcHeight')
      },
      immediate: true
    },
    isErrorModalShow(newValue){
      if(newValue){
        this.detail = ''
        this.errphotoFiles = []
      }
    }
  },
  computed:{
    CHECK_TYPE(){
      return {
        SINGLE_OPTION:{
          VALUE: '单选',
          KEY: '0'
        },
        MULTIPLE_OPTION:{
          VALUE: '多选',
          KEY: '1'
        },
        INPUT:{
          VALUE: '填值',
          KEY: '2'
        }
      }
    },
    ...mapGetters(['checkedCache']),
    resultArray(){
      if(this.result){
        return this.result.split(',')
      }
      return []
    }
  },
  methods: {
    onClick2Normal(){
      if(this.standardListItem.type ===  this.CHECK_TYPE.SINGLE_OPTION.KEY){
        this.result = this.list[0].name
      }
      if(this.standardListItem.type === this.CHECK_TYPE.MULTIPLE_OPTION.KEY){
        this.statusList = this.statusList.map((item, index) => {
          return {...item, checked: index === 0}
        })
        this.oldStatusList = deepClone(this.statusList)
        this.result = this.statusList[0].name
      }
      if(!this.isAbnormalResult()){
        this.detail = ''
        this.errphotoFiles = []
        this.cacheDetail = ''
        this.cacheErrphotoFiles = []
        this.setStorage()
      }
    },
    initStorage(){
      const room_checked_cache = deepClone(this.checkedCache)
      if(!room_checked_cache[this.workOrderDeviceId]){
        room_checked_cache[this.workOrderDeviceId] = {}
      }
      if(!room_checked_cache[this.workOrderDeviceId][this.standardListItem.workOrderDeviceStandardId]){
        room_checked_cache[this.workOrderDeviceId][this.standardListItem.workOrderDeviceStandardId] = {}
      }
      return room_checked_cache
    },
    setStorage(){
      const room_checked_cache = this.initStorage()
      room_checked_cache[this.workOrderDeviceId][this.standardListItem.workOrderDeviceStandardId].value = this.value
      room_checked_cache[this.workOrderDeviceId][this.standardListItem.workOrderDeviceStandardId].result = this.result
      room_checked_cache[this.workOrderDeviceId][this.standardListItem.workOrderDeviceStandardId].photoFiles = this.photoFiles
      room_checked_cache[this.workOrderDeviceId][this.standardListItem.workOrderDeviceStandardId].detail = this.cacheDetail
      room_checked_cache[this.workOrderDeviceId][this.standardListItem.workOrderDeviceStandardId].errphotoFiles = this.cacheErrphotoFiles
      this.$store.commit('SET_CHECKEDCACHE', room_checked_cache)
    },
    getKeyboardHeight(res){
      this.bottom =  res.height
    },
    close(value){
      this.isShow = value
    },
    showInput(){
      this.isShow = true
      this.$store.commit('SET_INPUTVALUE', this.value)
    },
    input(e){
      this.detail = e.detail.value
    },
    //数据初始化
    init(){
      this.list = []
      this.statusList = []
      if(this.standardListItem.type === this.CHECK_TYPE.SINGLE_OPTION.KEY){
        this.standardListItem.normal.split(',').forEach(item => {
          this.list.push({status: 'normal', name: item})
        })
        this.standardListItem.abnormal.split(',').forEach(item => {
          this.list.push({status: 'abnormal', name: item})
        })
      }else if(this.standardListItem.type === this.CHECK_TYPE.MULTIPLE_OPTION.KEY) {
        this.standardListItem.normal.split(',').forEach(item => {
          this.statusList.push({status: 'normal', name: item, checked: false})
        })
        this.standardListItem.abnormal.split(',').forEach(item => {
          this.statusList.push({status: 'abnormal', name: item, checked: false})
        })
      }
    },
    //输入框是否为异常值
    isAbnormalValue(){
      if(this.value || this.value === 0){
        return this.value < parseFloat(this.standardListItem.lowerLimit) || this.value > parseFloat(this.standardListItem.ceiling)
      }
      return false
    },
    //单选或多选状态是否含异常值
    isAbnormalResult(){
      if(this.standardListItem.type === this.CHECK_TYPE.SINGLE_OPTION.KEY){
        return this.list.find(item => {
          return item.name === this.result
        })?.status === 'abnormal'
      }else if(this.standardListItem.type === this.CHECK_TYPE.MULTIPLE_OPTION.KEY){
        if(this.result){
          return this.result.split(',').some(resultItem => {
            return this.statusList.find(item => {
              return item.name === resultItem
            })?.status === 'abnormal'
          })
        }else{
          return false
        }
      }
    },
    //单选框值改变
    radioChange(){
      if(this.isAbnormalResult()){
        this.isErrorModalShow = true
      }else{
        this.errphotoFiles = []
        this.detail = ''
        this.oldResult = this.result
      }
    },
    //输入框值改变
    valueChange(content){
      if(content === null || content === undefined || content === ''){
        this.value = ''
        return
      }
      this.value = content.toString().trim()
      if(isNaN(Number(this.value))){
        this.showException('INPUT_VALUE_ERROR')
        this.value = this.oldValue
        return
      }
      if(this.value < -9999 || this.value > 9999){
        this.showException('VALUE_OUT_RANGE')
        this.value = this.oldValue
        return
      }
      if(this.isAbnormalValue()){
        this.isErrorModalShow = true
      }else{
        this.oldValue = this.value
      }
    },
    // 上传异常信息封装
    submitTaskException(errorOssIdList, detail, extendParams = {}) {
      const standardResult = [{
        ...extendParams,
        dataId: this.standardListItem.dataId,
        workOrderDeviceStandardId: this.standardListItem.workOrderDeviceStandardId,
        result: this.result,
        value: this.value,
        status: 1,
        errorOssIdList,
        hospitalId: this.hospitalId,
        detail,
        isTakePhoto: this.standardListItem.isTakePhoto,
        workOrderDeviceId: this.standardListItem.workOrderDeviceId,
        workOrderId: this.workOrderId
      }]
      return submit(standardResult)
    },
    //提交数据前查看本地缓存有没有还没上传的照片
    async uploadCacheImage(photoList, failCB = null){
      let successCount = 0
      let count = 0
      let breakFlag = false
      if(photoList.length){
        for (let i = 0; i < photoList.length && !breakFlag; i++) {
          const item = photoList[i]
          if(!item.ossId) {
            await this.doUploadImage(item.url).then(res => {
              photoList[i].url = res.data.url
              photoList[i].ossId = res.data.ossId
              photoList[i].isUploaded = true
              successCount ++
              count ++
            })
            .catch((err) => {
              breakFlag = true
            })
          }
          else{
            count++
          }
        }
        
        if(successCount != 0) {
          // 更新缓存
          this.setStorage()
        }
      }
      if(!photoList.length || count === photoList.length) { return Promise.resolve(successCount) }
      else{ 
        // 兼容旧代码
        if (failCB) { 
          failCB() 
          return 
        }
        else {
          return Promise.reject({ msg:"缓存图片上传失败", sucCout: successCount}) 
        }
      }
    },

    async emitData(){
      try {
        if(this.photoFiles.length){
          await this.uploadCacheImage(this.photoFiles)
        }
        // 上传缓存的异常信息,原来使用的是this.cacheErrphotoFiles，
        // 改为this.cacheDetail，因为有异常时this.cacheDetail不能为空
        if(this.cacheDetail && this.cacheDetail !== "") {
          await this.uploadCacheImage(this.cacheErrphotoFiles)
          const errorOssIdList = this.cacheErrphotoFiles.map(item => {
            return item.ossId
          })
          await this.submitTaskException(errorOssIdList, this.cacheDetail)
          // 移除缓存
            this.cacheDetail = ''
            this.cacheErrphotoFiles = []
        }
      }catch (err) {
        this.showException('COMMIT_IMGERROR_FAIL')
        this.$emit('uploadCachePicFail')
        throw err
      }
      let ossIdList = []
      if(this.photoFiles.length && this.standardListItem.isTakePhoto){
        ossIdList = this.photoFiles.map(item => {
          return item.ossId
        })
      }else{
        ossIdList = []
      }

      // 触发回父组件继续上传
      this.$emit('formData',{
        dataId: this.standardListItem.dataId,
        workOrderDeviceStandardId: this.standardListItem.workOrderDeviceStandardId,
        result: this.result,
        value: this.value,
        status: this.status,
        ossIdList,
        hospitalId: this.hospitalId,
        isTakePhoto: this.standardListItem.isTakePhoto,
        isErrorModalShow: this.isErrorModalShow,
        workOrderDeviceId: this.standardListItem.workOrderDeviceId,
      })
    },
    isChange(){
      //数值标准判断value,单选和多选判断result
      if(this.standardListItem.type === '2'){
        return this.value !== this.originalValue
      }else{
        return this.result !== this.originalResult
      }
    },
    // 选择图片
    chooseImage(isError) {
      this.doChooseImageToBase64({
        params: {isError},
        maskInfo: {
          workOrderName: this.workOrderName || '-',
          deviceName: this.deviceName || '-',
          staffName: this.$store.getters.staffName || '-',
          time: dayjs().format('YYYY-MM-DD HH:mm:ss')
        }
      }, ()=>this.$emit('uploadStatusChange',true) ).finally(err => {
        this.$emit('uploadStatusChange',false)
      })
    },
    async uploadBase64(e) {
      if (!e || !e.dataURL) {
        this.$emit('uploadStatusChange',false)
        return Promise.reject('图片获取失败')
      }
      const dataURL = e.dataURL
      const params = e.params || {}
      try {
        const tempFilePath = await base64ToPath(dataURL)
        await this.doUploadImage(tempFilePath)
          .then(res => {
            const fileItem = {
              url: res.data.url,
              ossId: res.data.ossId,
              isUploaded: true
            }
            if (params.isError) { this.errphotoFiles.push(fileItem) }
            else { this.photoFiles.push(fileItem) }
            return Promise.resolve(res)
          })
          .catch((err) => {
            const fileItem = {
              url: tempFilePath,
              ossId: '',
              isUploaded: false
            }
            if (params.isError) { this.errphotoFiles.push(fileItem) }
            else { this.photoFiles.push(fileItem) }
            return Promise.reject(err)
          })
      } finally {
        // 重置上传状态，以防切换页面时重新触发上传
        const uploadState = {
          ...this.uploadState,
          tempFilePath: '',
        }
        this.uploadState = uploadState
        this.$emit('uploadStatusChange',false)
      }
    },
    // 点击预览
    previewImage(e,isError = false) {
      const current = e.currentTarget.dataset.cur;
      const urls = [];
      if(isError){
        this.errphotoFiles.forEach((el) => {
          urls.push(el.url);
        });
      }else{
        this.photoFiles.forEach((el) => {
          urls.push(el.url);
        });
      }
      uni.previewImage({
        current: current,
        urls: urls, //需要预览的图片链接列表
        indicator: "none", //图片指示器样式 "default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器
      });
    },
    // 删除图片
    removeImage(index,isError = false) {
      if(isError){
        this.errphotoFiles.splice(index, 1)
      }else{
        this.photoFiles.splice(index, 1)
      }
      this.$emit('calcHeight')
    },
    //异常上报确认按钮
    async confirm() {
      if(!this.detail){
        this.showException('INPUT_EMPTY')
        return
      }
      this.$emit('maskShowOpen',true)
      try {
        await this.uploadCacheImage(this.errphotoFiles)
      const errorOssIdList = this.errphotoFiles.map(item => {
        return item.ossId
      })
        await this.submitTaskException(errorOssIdList, this.detail,{ossIdList: [], isErrorModalShow: this.isErrorModalShow})
        this.oldResult = this.result
        this.oldValue = this.value
        this.photoFiles = []
        this.detail = ''
        this.cacheDetail = ''
        this.cacheErrphotoFiles = []
        this.oldStatusList = deepClone(this.statusList)

      } catch (err) {
        this.cacheDetail = this.detail
        this.cacheErrphotoFiles = this.errphotoFiles
        this.showException('NETWORK_BAD')
      }
        this.setStorage()
        this.isErrorModalShow = false
        this.$emit('maskShowOpen',false)
    },

    //异常上报取消按钮
    cancle(){
      this.result = this.oldResult || ''
      this.value = this.oldValue || ''
      this.statusList = deepClone(this.oldStatusList)
      this.isErrorModalShow = false
    },
    //状态选择提交按钮
    statusCheckConfirm(){
      const resultTemp = this.statusList.reduce((pre, next) => {
        if(next.checked){
          if(!pre.length) return next.name
          else{
            return pre + ',' + next.name
          }
        }else{
          return pre
        }
      },'')
      if(!resultTemp){
        this.showException('LEAST_CHOOSE_ONE')
        return
      }
      this.result = resultTemp
      if(this.isAbnormalResult()){
        this.isErrorModalShow = true
      }else{
        this.oldResult = this.result
        this.oldStatusList = deepClone(this.statusList)
      }
      //隐藏状态选择模态框
      this.isStatusCheckModalShow = false
    },
    showException(contentKey){
      this.$emit('exceptionShowOpen',{bool:true,contentKey})
    },
    //状态选择取消按钮
    statusCheckCancle(){
      this.statusList = deepClone(this.oldStatusList)
      this.isStatusCheckModalShow = false
    }
  },
  beforeDestroy(){
    clearInterval(this.timer)
  },
  options: {styleIsolation: "shared"},
}
</script>

<script module="mask" lang="renderjs">
export default {
  methods: {
    drawMask(newValue, oldVal, ownerInstance, instance) {
      // 解决事件没有销毁、初次进入会触发一次事件产生报错的问题
      if(!instance || !newValue || !newValue.tempFilePath) {
        return
      }
      try {
        const tempFilePath = newValue.tempFilePath.replace(/[\r\n]/g, "")
        const maskInfo = newValue.maskInfo || {}
        const params = newValue.params || {}
        const oCanvas = document.createElement('canvas')
        const oImg = document.createElement('img')
        oImg.src = tempFilePath
        oImg.onload = async () => {
          const { width, height } = oImg
          oCanvas.setAttribute('width', width)
          oCanvas.setAttribute('height', height)
          const ctx = oCanvas.getContext('2d')
          // 睡眠器，强制优先执行ctx.drawImage
          await new Promise((resolve) => {
            setTimeout(() => {
              ctx.drawImage(oImg, 0, 0, width, height)
              resolve()
            }, 500)
          })

          //设置画笔样式
          ctx.fillStyle = '#fff'
          ctx.lineWidth = 4;
          ctx.lineCap = "round"
          ctx.lineJoin = "round"
          ctx.font = `${width * 0.037}px sans-serif`
          // 水印
          ctx.strokeText(maskInfo.workOrderName || '-',width * 0.092,width * 0.18);
          ctx.fillText(maskInfo.workOrderName || '-', width * 0.092, width * 0.18)
          ctx.strokeText(maskInfo.deviceName || '-',width * 0.092,width * 0.23);
          ctx.fillText(maskInfo.deviceName || '-', width * 0.092, width * 0.23)
          ctx.strokeText(maskInfo.staffName || '-',width * 0.092,width * 0.28);
          ctx.fillText(maskInfo.staffName || '-', width * 0.092, width * 0.28)
          ctx.strokeText(maskInfo.time || '-',width * 0.092,width * 0.33);
          ctx.fillText(maskInfo.time || '-', width * 0.092, width * 0.33)

          const dataURL = oCanvas.toDataURL('image/jpeg', 0.5)
          this.$ownerInstance.callMethod('uploadBase64', {
            dataURL,
            params
          })
        }
      } catch {
        const params = newValue.params || {}
        this.$ownerInstance.callMethod('uploadBase64', {
          dataURL: '',
          params
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .u-radio__label {
  margin-left: 20rpx !important;
  padding: 24rpx 0 24rpx 24rpx !important;
  flex: 1 !important;
  width: 560rpx;
}
/deep/ .u-checkbox{
  width: 100% !important;
  display: flex !important;
  line-height: 1;
}
/deep/ .u-checkbox__label{
  flex: 1 !important;
  width: 560rpx;
  padding: 55rpx 0;
}
/deep/ .u-radio{
  width: 100% !important;
  display: flex !important;
  line-height: 1;
}
/deep/ .u-input__input{
  font-size: 32rpx !important;
}
.delBtn{
  top: -12rpx;
  right: -12rpx;
}
.options_container{
  max-height: 520rpx;
  overflow: scroll;
}
.resultArray > text:not(:last-child):after{
  content: ',';
}
</style>
